<template>
  <div style="width: 650px">
    <el-form
      ref="dataForm"
      :model="entity"
      :rules="formRules"
      label-width="160px"
    >
      <el-form-item label="旧密码" prop="oldPassword">
        <Password
          v-model="entity.oldPassword"
          placeholder="请输入新密码"
          toggleMask
          :feedback="false"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <Password
          v-model="entity.newPassword"
          placeholder="请输入新密码"
          toggleMask
        >
          <template #footer>
            <Divider />
            <ul class="m-l-20">
              <li>至少包含一个数字</li>
              <li>至少包含一个大写字母</li>
              <li>至少包含一个小写字母</li>
              <li>至少6位，至多20位</li>
            </ul>
          </template>
        </Password>
      </el-form-item>

      <el-form-item>
        <Button :loading="loading" @click="submitHandler">提交</Button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { regular } from '@/utils/formRegular'
import { putPassword } from '@/api/personal'

export default {
  name: 'ModifyPassword',
  data() {
    return {
      loading: false,
      entity: {},
      formRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            pattern: regular.password,
            message: regular.passwordMsg,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    submitHandler() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          putPassword(this.entity)
            .then(() => {
              this.$message.success('修改成功')
              this.$store.commit('viewTab/DEL_VIEWTAB', this.$route.path)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>
